Validare Asincronă React useFormStatus: Actualizări Asincrone ale Stării Formularului

În dezvoltarea web modernă, formularele sunt un element crucial pentru interacțiunea cu utilizatorul. Asigurarea validității datelor și furnizarea de feedback în timp real sunt esențiale pentru o experiență pozitivă a utilizatorului. Hook-ul useFormStatus din React, introdus în React 18, oferă o modalitate puternică și elegantă de a gestiona starea trimiterilor de formulare, mai ales atunci când se lucrează cu validare asincronă. Acest articol analizează detaliile useFormStatus, concentrându-se pe scenariile de validare asincronă, oferind exemple practice și schițând bune practici pentru a crea formulare robuste și ușor de utilizat.

Înțelegerea Noțiunilor Fundamentale ale useFormStatus

Hook-ul useFormStatus oferă informații despre ultima trimitere a formularului care a declanșat un sau în cadrul unui <form>. Acesta returnează un obiect cu următoarele proprietăți:

• pending: Un boolean care indică dacă trimiterea formularului este în prezent în așteptare.
• data: Datele asociate cu trimiterea formularului, dacă sunt disponibile.
• method: Metoda HTTP utilizată pentru trimiterea formularului (de exemplu, 'get' sau 'post').
• action: Funcția utilizată ca acțiune a formularului.

Deși pare simplu, useFormStatus devine incredibil de valoros atunci când se lucrează cu operațiuni asincrone, cum ar fi validarea inputului utilizatorului în raport cu un server la distanță sau efectuarea de transformări complexe de date înainte de trimitere.

Necesitatea Validării Asincrone

Validarea tradițională sincronă, unde verificările sunt efectuate imediat în cadrul browserului, este adesea insuficientă pentru aplicațiile din lumea reală. Luați în considerare aceste scenarii:

• Disponibilitatea Numelui de Utilizator: Verificarea dacă un nume de utilizator este deja luat necesită o căutare în baza de date.
• Verificarea Adresei de Email: Trimiterea unui email de verificare și confirmarea validității acestuia necesită interacțiune la nivel de server.
• Procesarea Plăților: Validarea detaliilor cardului de credit implică comunicarea cu un gateway de plată.
• Completarea Automată a Adresei: Sugerarea opțiunilor de adresă pe măsură ce utilizatorul tastează necesită apelarea unei API externe.

Aceste scenarii implică în mod inerent operațiuni asincrone. useFormStatus, în combinație cu funcții asincrone, ne permite să gestionăm aceste validări cu eleganță, oferind feedback imediat utilizatorului fără a bloca interfața de utilizator.

Implementarea Validării Asincrone cu useFormStatus

Să explorăm un exemplu practic de validare asincronă a disponibilității unui nume de utilizator.

Exemplu: Validare Asincronă a Numelui de Utilizator

Mai întâi, vom crea o componentă React simplă cu un formular și un buton de trimitere.

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    \"use server\";
    const username = formData.get('username');

    // Simulate an API call to check username availability
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network latency

    const isAvailable = username !== 'taken'; // Mock availability check

    if (!isAvailable) {
      throw new Error('Username is already taken.');
    }

    console.log('Username is available!');
    // Perform actual form submission here
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor=\"username\">Username:</label>
      <input
        type=\"text\"
        id=\"username\"
        name=\"username\"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type=\"submit\" disabled={isPending}>
        {isPending ? 'Checking...' : 'Submit'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && \"Submitting...\"}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              

Copy